<!-- eslint-disable vue/no-mutating-props -->
<template>
  <z-input
    ref="input"
    :class="className"
    v-model.trim="input.value"
    :type="input.type"
    :disabled="input.disabled"
    :autosize="{ minRows, maxRows }"
    v-on="$listeners"
    clearable
  />
</template>
<script>
import ZInput from "../ZBase/zInput.vue";
export default {
  name: "ZFilterInput",
  components: {
    ZInput,
  },
  props: {
    input: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    minRows({ input }) {
      return input.minRows || 1;
    },
    maxRows({ input }) {
      return input.maxRows || 5;
    },
    className({ input }) {
      return {
        "z-filter-input": true,
        "z-textarea": input.type === "textarea",
        "z-relative": input.relative,
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.z-filter-input {
  position: relative;
  min-height: 32px;

  .z-textarea {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .z-relative {
    position: relative;
  }
}
</style>
